<template>
  <div class="study-log">
    <div class="log-header">
      <h3>学习日志</h3>
      <el-button type="primary" size="small" @click="exportLogs">导出日志</el-button>
    </div>
    <div class="log-list">
      <el-timeline>
        <el-timeline-item
          v-for="(log, index) in studyLogs"
          :key="index"
          :timestamp="formatTime(log.timestamp)"
          placement="top"
        >
          <el-card>
            <h4>{{ log.title }}</h4>
            <div class="log-content markdown-body" v-html="renderMarkdown(log.content)"></div>
            <div class="log-actions">
              <el-button type="text" size="small" @click="deleteLog(index)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { marked } from 'marked'
import 'github-markdown-css/github-markdown.css'

const studyLogs = ref([])
const STORAGE_KEY = 'study_logs'

// 配置marked选项
marked.setOptions({
  breaks: true, // 支持GitHub风格的换行
  gfm: true,    // 启用GitHub风格的Markdown
  headerIds: false, // 禁用标题ID
  mangle: false,    // 禁用标题ID转义
  sanitize: false,  // 允许HTML标签
  smartLists: true, // 使用更智能的列表行为
  smartypants: true // 使用更智能的标点符号
})

// 渲染Markdown内容
const renderMarkdown = (content) => {
  try {
    return marked(content)
  } catch (error) {
    console.error('Markdown渲染错误:', error)
    return content
  }
}

// 加载本地存储的日志
const loadLogs = () => {
  const savedLogs = localStorage.getItem(STORAGE_KEY)
  if (savedLogs) {
    studyLogs.value = JSON.parse(savedLogs)
  }
}

// 保存日志到本地存储
const saveLogs = () => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(studyLogs.value))
}

// 添加新日志
const addLog = (title, content) => {
  studyLogs.value.unshift({
    title,
    content,
    timestamp: new Date().toISOString()
  })
  saveLogs()
}

// 删除日志
const deleteLog = (index) => {
  studyLogs.value.splice(index, 1)
  saveLogs()
  ElMessage.success('日志已删除')
}

// 导出日志
const exportLogs = () => {
  const logsText = studyLogs.value.map(log => {
    return `时间：${formatTime(log.timestamp)}\n标题：${log.title}\n内容：\n${log.content}\n\n`
  }).join('---\n')

  const blob = new Blob([logsText], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `学习日志_${new Date().toLocaleDateString()}.txt`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 组件挂载时加载日志
onMounted(() => {
  loadLogs()
})

// 暴露方法给父组件
defineExpose({
  addLog
})
</script>

<style scoped>
.study-log {
  padding: 20px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.log-list {
  max-height: 500px;
  overflow-y: auto;
}

.log-content {
  margin: 10px 0;
}

.log-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

:deep(.markdown-body) {
  font-size: 14px;
  line-height: 1.6;
}

:deep(.markdown-body pre) {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
}

:deep(.markdown-body code) {
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
  font-size: 85%;
  margin: 0;
  padding: 0.2em 0.4em;
}

:deep(.markdown-body pre code) {
  background-color: transparent;
  padding: 0;
}

:deep(.markdown-body table) {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}

:deep(.markdown-body table th),
:deep(.markdown-body table td) {
  border: 1px solid #dfe2e5;
  padding: 6px 13px;
}

:deep(.markdown-body table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

:deep(.markdown-body table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}
</style> 